<template>
  <div class="box" id="box" ref="box">
    <div class="left" id="left">左侧div内容</div>
    <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
    <div class="right" id="right">右侧div内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv() {
      let resize = document.getElementById("resize");
      let left = document.getElementById("left");
      let right = document.getElementById("right");
      let box = document.getElementById("box");

      // 鼠标按下事件
      resize.onmousedown = function (e) {
        // 记录坐标起始位置
        let startX = e.clientX;

        // 左边元素起始宽度
        resize.left = left.offsetWidth;
        console.log("宽度：", resize.left);
        // 鼠标拖动事件
        document.onmousemove = function (e) {
          // 鼠标拖动的终止位置
          let endX = e.clientX;

          // （endx-startx）= 移动的距离
          //  resize.left + 移动的距离 = 左边区域最后的宽度
          let moveLen = resize.left + (endX - startX);
          console.log(moveLen);

          // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
          let maxWidth = box.clientWidth - resize.offsetWidth;

          // 限制左边区域的最小宽度为30px
          if (moveLen < 30) moveLen = 30;

          // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
          if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;

          // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
          console.log((moveLen / maxWidth) * 100);
          // left.style.width =(moveLen / maxWidth * 100) + '%';
          left.style.width = moveLen + "px";

          // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
          console.log(((maxWidth - moveLen) / maxWidth) * 100);
          right.style.width = maxWidth - moveLen + "px";
          console.log(moveLen);
        };
        // 鼠标松开事件
        document.onmouseup = function (evt) {
          console.log(11);
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
        };
        resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
        return false;
      };
    },
  },
};
</script>
<style scoped>
/* 拖拽相关样式 */
.box {
  width: 100%;
  height: 100%;
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
  width: calc(50% - 10px); /*左侧初始化宽度*/
  height: 100%;
  background: red;
  float: left;
}
/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
/*右侧div'样式*/
.right {
  float: left;
  width: 50%; /*右侧初始化宽度*/
  height: 100%;
  background: blue;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>
